<script lang="ts" setup>
import { ref, onActivated } from 'vue';
import { $fetch } from '@/settings/utils/fetch';
import useNotification from '@/settings/hooks/notification';
import { useI18n } from 'vue-i18n';

const listing = ref([]);
const pager = ref({});
const loading = ref(false);
const search = ref();
const { success } = useNotification();
const { t } = useI18n();

const form = ref({
  status: 0,
});

const statusList = {
  0: t('settings.view.column.listing.index.status.0'),
  1: t('settings.view.column.listing.index.status.1'),
  2: t('settings.view.column.listing.index.status.2'),
}

const refresh = async (page = 1) => {
  const { isSuccess, data } = await $fetch('/admin/atomgitPopSpecialColumn/getPage', {
    method: 'post',
    data: {
      columnStatus: form.value.status,
      pageNum: page,
      pageSize: 20,
    },
    loadingStatus: loading,
  });

  if (isSuccess) {
    listing.value = data.records;

    pager.value = {
      current: page,
      total: data.total ?? 0,
    };
  }
}

const remove = async (id: string) => {
  const { isSuccess } = await $fetch('/admin/atomgitPopSpecialColumn/delete', {
    method: 'post',
    data: {
      columnId: id,
    },
    loadingStatus: loading,
  });

  if (isSuccess) {
    success(t('settings.notification.del'));
    search.value.refresh();
  }
};

const changeStatus = async (id: string, status: number) => {
  const { isSuccess } = await $fetch('/admin/atomgitPopSpecialColumn/onlineAndOffline', {
    method: 'post',
    data: {
      columnId: id,
      columnStatus: status,
    },
    loadingStatus: loading,
  });

  if (isSuccess) {
    success(t('settings.notification.success'));
    search.value.refresh();
  }
};

onActivated(() => {
  search.value.refresh('reset');
});
</script>

<template>
  <OpenPageSection>
    <OpenSearchTable :pager="pager" :data="listing" :loading="loading" @search="refresh" ref="search">
      <template #search-before>
        <div class="mb-20">
          <ARadioGroup v-model="form.status" @change="refresh()">
            <ARadio v-for="(item, index) in statusList" :key="index" :value="Number(index)">
              <template #radio="{ checked }">
                <ATag :checked="checked" size="large" color="arcoblue" checkable>{{ item }}</ATag>
              </template>
            </ARadio>
          </ARadioGroup>
        </div>
      </template>

      <template #header-button>
        <OpenRouterButton to="/direction/column/listing/add" type="primary">{{ $t('settings.action.add') }}</OpenRouterButton>
      </template>

      <template #columns>
        <ATableColumn :title="$t('settings.view.column.listing.index.column')" data-index="columnName" />

        <ATableColumn :title="$t('settings.view.column.listing.index.cover')" header-cell-class="w-10%">
          <template #cell="{ record }">
            <OpenImage :src="record.coverUrl" img-class="w-full h-80 object-cover" />
          </template>
        </ATableColumn>

        <ATableColumn :title="$t('settings.view.column.listing.index.quantity')" data-index="informationNum" :width="120" />
        <ATableColumn :title="$t('settings.view.column.listing.index.order')" data-index="displayOrder" :width="120" />
        <ATableColumn :title="$t('settings.view.column.listing.index.time')" data-index="createTime" :width="180" />

        <ATableColumn :title="$t('settings.view.column.listing.index.state')" :width="100">
          <template #cell="{ record }">
            <ATag color="blue" v-if="record.columnStatus == 1">{{ $t('settings.view.column.listing.index.status.1') }}</ATag>
            <ATag v-else>{{ $t('settings.view.column.listing.index.status.2') }}</ATag>
          </template>
        </ATableColumn>

        <ATableColumn :title="$t('settings.view.column.listing.index.operate')" :width="300">
          <template #cell="{ record }">
            <div class="button-actions">
              <OpenRouterButton
                type="primary" size="small" :to="`/direction/column/detail/index/${record.columnId}`"
              >
                {{ $t('settings.action.manage') }}
              </OpenRouterButton>
              <OpenRouterButton size="small" :to="`/direction/column/listing/edit/${record.columnId}`">
                {{ $t('settings.action.edit') }}
              </OpenRouterButton>
              <AButton
                status="danger" size="small" v-confirm
                @click="changeStatus(record.columnId, 2)"
                v-if="record.columnStatus == 1"
              >
                {{ $t('settings.action.downline') }}
              </AButton>
              <AButton
                type="primary" size="small" v-confirm
                @click="changeStatus(record.columnId, 1)"
                v-if="record.columnStatus == 2"
              >
                {{ $t('settings.action.publish') }}
              </AButton>
              <AButton
                type="primary" status="danger" size="small" v-confirm
                @click="remove(record.columnId)"
              >
                {{ $t('settings.action.delete') }}
              </AButton>
            </div>
          </template>
        </ATableColumn>
      </template>
    </OpenSearchTable>
  </OpenPageSection>
</template>

<style lang="scss" scoped>
</style>
